<template>
    <!-- drag相关事件是图表从菜单中拖拽进入 -->
    <div 
        class="content-edit-container w-full h-full" 
        id="dataview-chart-edit-layout"
        ref="layoutDom"
    >
        <!-- 标尺整体组件 -->
        <edit-rule>
            <edit-range>
                <div 
                    :style="{
                        ...rangeStyle
                    }"
                >
                    <div v-for="(item,index) in dataviewState.componentList" :key="item.id">
                        <edit-group
                            v-if="item.isGroup"
                            :groupIndex="index"
                            :groupData="(item as CreateComponentGroupType)"
                        />
                        <edit-shape-box
                            v-else
                            :data-id="item.id"
                            :index="index"
                            :item="item"
                            :style="{
                                ...useComponentStyle(item.attr,index)
                            }"
                            @click="mouseClickHandle($event,item)"
                            @mouseenter="mouseenterHandle($event,item)"
                            @mouseleave="mouseleaveHandle($event,item)"
                            @mousedown="mousedownHandle($event,item)"
                            @contextmenu="handleContextMenu($event, item, optionsHandle)"
                        >
                        <!-- 存放component组件动态渲染 -->
                            <component
                                class="edit-content-chart"
                                :class="animationsClass(item.styles.animations)"
                                :is="item.chartConfig.chartKey"
                                :chartConfig="item"
                                :themeSetting="themeSetting"
                                :themeColor="themeColor"
                                :style="{
                                    ...useSizeStyle(item.attr),
                                    ...getTransformStyle(item.styles)
                                }"
                            />
                        </edit-shape-box>
                    </div>
                </div>
            </edit-range>
        </edit-rule>
    </div>
</template>

<script setup lang="ts">
import { computed, onBeforeMount, onMounted, onUnmounted, ref } from 'vue';
import editRule from '../editRule/index.vue'
import { useDataViewStore } from '@/stores/dataview';
import { storeToRefs } from 'pinia';
import { useDataViewLayoutStore } from '@/stores/dataviewLayout';
import editRange from '../editRange/index.vue'
import { useMouseHandle } from '../hooks/useDrag';
import editShapeBox from '../editShapeBox/index.vue'
import { useComponentStyle, useSizeStyle } from '../hooks/useStyle';
import { colorCustomMerge, getTransformStyle } from '@/utils';
import { handleContextMenu } from '../hooks/useContextMenu';
import type { CreateComponentGroupType, CreateComponentType } from '@/views/dataview/packages/public/type';
import { MenuEnum, MenuTypeEnum } from '@/enum';
import editGroup from '../editGroup/index.vue'
import { animationsClass } from '@/utils/style';

const {mouseClickHandle,mouseenterHandle,mouseleaveHandle,mousedownHandleUnStop,mousedownHandle} = useMouseHandle()

const dataviewLayoutStore = useDataViewLayoutStore();
const { dataviewLayoutState } = storeToRefs(dataviewLayoutStore);
const dataviewStore = useDataViewStore();
const { dataviewState } = storeToRefs(dataviewStore);

const layoutDom = ref<Element>()
const ob = ref<ResizeObserver>()

const themeSetting = computed(()=>{
    return dataviewStore.getEditCanvasConfig.chartThemeSetting
})

const optionsHandle = ( targetList: any[],allList: any[],targetInstance: CreateComponentType)=>{
    // 分组清空
    if(dataviewStore.getTargetChart.selectId.length > 1){
        // 分组需要展示的数据过滤出来
        return allList.filter((item)=>[MenuEnum.GROUP,MenuEnum.DELETE].includes(item.key))
    }
    const statusMenuEnums :any[]= []
    if(targetInstance.status.lock){
        statusMenuEnums.push(MenuEnum.LOCK)
    }else{
        statusMenuEnums.push(MenuEnum.UNLOCK)
    }
    if(targetInstance.status.hide){
        statusMenuEnums.push(MenuEnum.HIDE)
    }else{
        statusMenuEnums.push(MenuEnum.SHOW)
    }
    return targetList.filter((item)=>!statusMenuEnums.includes(item.key))
}

const rangeStyle = computed(()=>{
    const background = dataviewStore.getEditCanvasConfig.background
    const backgroundImage = dataviewStore.getEditCanvasConfig.backgroundImage
    const selectColor = dataviewStore.getEditCanvasConfig.selectColor //是否允许选择背景色

    const backgroundColor = background ? background : undefined
    const computedBackground = selectColor   ? { background: backgroundColor }
    : { background: `url(${import.meta.env.VITE_API_URL}/${backgroundImage}) no-repeat center center / cover !important` }
    return {
        ...computedBackground,
        width: 'inherit',
        height: 'inherit'
    }
})

// 自定义颜色合并
const themeColor = computed(()=>{
    const mergeData =  colorCustomMerge(dataviewStore.getEditCanvasConfig.chartCustomThemeColorInfo)
    return mergeData[dataviewStore.getEditCanvasConfig.chartThemeColor]
})

onMounted(()=>{
    if(layoutDom.value){
        ob.value = new ResizeObserver((entries:any)=>{
            for (const entry of entries) {
                const { width, height } = entry.contentRect;
                dataviewLayoutState.value.layoutContentWidth = width
                dataviewLayoutState.value.layoutContentHeight = height
            } 
        })
        ob.value.observe(layoutDom.value)
    }
})

onUnmounted(()=>{
    ob.value?.disconnect()
})
</script>

<style lang="scss" scoped>
.edit-content-chart {
    position: absolute;
    overflow: hidden;
}
</style>